<template>
  <a-card :bordered="false">
    <template>
      <div class="table-operator">
        <a-button
          v-action:menu:save
          type="primary"
          icon="plus"
          @click="handleAdd(null)"
        >新建目录</a-button>
      </div>
    </template>

    <div class="table-page-search-wrapper">
      <a-table :columns="columns" :dataSource="data" size="small" bordered>
        <span slot="action" slot-scope="text, record">
          <template>
            <a-tag color="orange" v-action:menu:update @click="handleEdit(record)" >编辑</a-tag>
            <a-tag color="red" v-action:menu:del @click="handleDelete(record)" >删除</a-tag>
            <a-tag color="green" v-action:menu:save @click="handleAdd(record)" v-if="record.attributes.type!=2" >新增{{ labelMenu(record.attributes.type+1) }}</a-tag>
            <a-tag color="green" v-action:menu:hide @click="handleHide(record,0)" v-if="record.attributes.hidden && record.attributes.type!=2" >显示{{ labelMenu(record.attributes.type) }}</a-tag>
            <a-tag color="green" v-action:menu:hide @click="handleHide(record,1)" v-if="!record.attributes.hidden && record.attributes.type!=2" >隐藏{{ labelMenu(record.attributes.type) }}</a-tag>
          </template>
        </span>

        <span slot="tagType" slot-scope="text">
          <a-tag color="#108ee9" v-if="text==0">目录</a-tag>
          <a-tag color="orange" v-if="text==1">菜单</a-tag>
          <a-tag color="#87d068" v-if="text==2">按钮</a-tag>
        </span>

        <span slot="hidden" slot-scope="text,record">
          <div v-if="record.attributes.type!=2">
            <a-tag color="orange" v-if="text">隐藏</a-tag>
            <a-tag color="green" v-else>显示</a-tag>
          </div>
          <div v-else>--</div>

        </span>
        <span
          slot="url"
          slot-scope="text">
          <span v-html="$substr(text,12)"></span>
        </span>
      </a-table>
      <form-handle ref="formHandle" @ok="handleOk" />
    </div>
  </a-card>
</template>

<script>
import { page, delByPk, hideIt } from '@/api/system/menu'
import formHandle from './handle'

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '菜单标识',
    dataIndex: 'attributes.perms',
    key: 'perms',
    width: '16%'
  },
  {
    title: 'API接口',
    dataIndex: 'attributes.url',
    width: '16%',
    key: 'url',
    scopedSlots: {
      customRender: 'url'
    }
  },

  {
    title: '菜单类型',
    dataIndex: 'attributes.type',
    width: '6%',
    key: 'type',
    scopedSlots: { customRender: 'tagType' }
  },
  {
    title: '显示状态',
    dataIndex: 'attributes.hidden',
    width: '6%',
    key: 'hidden',
    scopedSlots: { customRender: 'hidden' }
  },
  {
    title: '菜单排序',
    dataIndex: 'attributes.orderNum',
    width: '8%',
    key: 'orderNum'
  },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    scopedSlots: { customRender: 'action' }
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}
export default {
  data () {
    return {
      data: [],
      columns,
      rowSelection
    }
  },
  components: {
    formHandle
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      return page({}).then(response => {
        const result = response.res
        if (result.id === '-1') {
           this.data = result.children
        } else {
           const menuArr = [result]
           this.data = menuArr
        }
      })
    },
    handleAdd (record) {
      this.$refs.formHandle.add(record)
    },
    handleEdit (record) {
      this.$refs.formHandle.edit(record)
    },
    labelMenu (type) {
      if (type === 0) {
        return '目录'
      } else if (type === 1) {
        return '菜单'
      } else if (type === 2) {
        return '按钮'
      }
    },
    handleDelete (record) {
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要删除吗?',
        onOk () {
          delByPk({ id: record.id })
            .then(response => {
              if (response.code === 0) { that.$message.info('操作成功!') } else { that.$message.error(response.msg) }
              that.handleOk()
            })
            .catch(response => {
              that.$message.warn(response.data.msg)
            })
        },
        onCancel () {}
      })
    },
    handleHide (record, hidden) {
      const that = this
      this.$confirm({
        title: '操作提醒',
        content: '确定要隐藏该菜单吗?',
        onOk () {
          hideIt({ id: record.id, hidden: hidden })
            .then(response => {
              if (response.code === 0) { that.$message.info('操作成功!') } else { that.$message.error(response.msg) }
              that.handleOk()
            })
            .catch(response => {
              that.$message.warn(response.data.msg)
            })
        },
        onCancel () {}
      })
    },
    handleOk () {
      this.loadData()
    }
  }
}
</script>
